<template>
  <div class="all-answer-container">
    <div class="all-answer-header">
      <h2 class="total-num">{{ answerNum}}</h2>
      <div class="sort">
        <div class="origin" v-if="!clickSort">
          <span>{{ sortWay }}</span>
          <div class="arrow">
            <Icon type="ios-arrow-up" size="10" class="up" />
            <Icon type="ios-arrow-down" size="10" class="down" />
          </div>
        </div>
        <div class="click-change" v-else>
          <p>默认排序</p>
          <p>按时间排序</p>
        </div>
      </div>
    </div>
    <h2 v-if="answerList.length === 0" class="no-answer">暂时没有回答~~</h2>
    <answer-item
    v-else
      v-for="(item, index) in answerList"
      :key="index"
      :answerMessage="answerList[index]"
    />
  </div>
</template>
<script>
import AnswerItem from "@/components/question/AnswerItem";
import Answer from "../person/Answer.vue";

import axios from "@/util/axios";

export default {
  name: "AllAnswer",
  data() {
    return {
      answerList: [],
      clickSort: false,
      sortWay: "默认排序",
      pageNum: 1,
      pageSize: 8,
    };
  },
  methods: {
    //点击排序
    clickChange(e) {
      if (e.target.parentElement.parentElement && e.target.parentElement.parentElement.classList.contains("sort")) {
        this.clickSort = true;
        if (e.target.parentElement.classList.contains("click-change")) {
          //切换排序方式
          this.sortWay = e.target.innerText;
          this.clickSort = false;
        }
      } else {
        this.clickSort = false;
      }
    },
    getAnswer() {
      axios.get('answer/findQuestionAnswer',{
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          aquestion_id: this.$route.params.id
        }
      }).then( res => {
        console.log(res)
        if(res.code === '1') {
          //查询问题的回答成功
          this.pageNum++
          this.answerList = res.data
        }
      })
    }
  },
  computed: {
    answerNum() {
      return parseFloat(this.answerList.length).toLocaleString() + " 个回答";
    },
  },
  mounted() {
    window.addEventListener("click", this.clickChange);
    // 发送请求获取所有的回答
    this.getAnswer()
   
  },
  components: {
    AnswerItem,
  },
};
</script>

<style scoped lang="scss">
.all-answer-container {
  padding: 0 2rem;
  width: 100%;
  min-height: 20rem;
  background-color: #fff;
  .no-answer {
    text-align: center;
    margin-top: 7rem;
  }
  .all-answer-header {
    position: relative;
    height: 5rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    border-bottom: 0.1rem solid #f6f6f6;
    margin-bottom: 1rem;
    .total-num {
      font-weight: 600;
    }
    .sort {
      position: absolute;
      right: 2rem;
      display: flex;
      align-items: center;
      .origin {
        display: flex;
        color: #8590a6;
        align-items: center;
        cursor: pointer;
        .arrow {
          position: relative;
          .up {
            position: absolute;
            top: -0.8rem;
          }
          .down {
            position: absolute;
            bottom: -1rem;
          }
        }
      }
      .click-change {
        position: absolute;
        top: -2rem;
        right: -1.8rem;
        width: 8.5rem;
        background-color: #fff;
        padding: 0.8rem 0;
        box-shadow: 0 0.1rem 0.3rem rgba(18, 18, 18, 0.1);
        p {
          color: #8590a6;
          text-align: center;
          line-height: 4rem;
          cursor: pointer;
          &:hover {
            background: rgb(246, 246, 246);
          }
        }
      }
    }
  }
}
</style>